<template>
  <view v-if="pageData" class="home-step">
    <view class="header">
      <view class="title">
        {{ pageData.t_text1 }}
      </view>
      <view class="title">
        {{ pageData.t_text2 }}
      </view>
      <view class="en-desc">
        {{ pageData.t_text3 }}
      </view>
    </view>

    <u-scroll-list class="step-scroll">
      <view v-for="item in pageData.app_path_set_dt" :key="item.id" class="step-item" @click="onStepClick(item)">
        <view class="flag">{{ item.title }}</view>
        <image :src="getImgUrl(item.image)" class="img" />
        <view v-if="item.text1" class="title">{{ item.text1 }}</view>
        <viwe v-if="item.text2" class="desc">
          {{ item.text2 }}
        </viwe>
      </view>
    </u-scroll-list>
  </view>
  <view v-else />
</template>

<script>
import {
  getImg,
  execFn,
  getCurrentPageConfigByName
} from '../../../utils/index'
export default {
  name: 'Step',
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared'
  },
  // #endif
  data() {
    return {
      pageData: null,
      list: []
    }
  },
  mounted() {
    this.initPage()
  },

  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('步骤列表').then(res => {
        console.log('步骤列表--配置数据')
        console.log(res)
        _this.pageData = res
      })
    },
    getImgUrl(image) {
      return getImg(image)
    },
    onStepClick(data) {
      data.url && execFn(data.url)
    }
  }
}
</script>

<style lang="scss" scoped>
	.home-step {
		padding: 90rpx 0 0 20rpx;

		.header {
			.title {
				font-size: 48rpx;
				font-weight: bolder;

				&:first-child {
					padding-bottom: 10rpx;
				}
			}

			.en-desc {
				font-size: 32rpx;
				padding: 24rpx 0 64rpx;
			}
		}

		.step-item {
			display: flex;
			flex-flow: column;

			&:not(:last-child) {
				margin-right: 40rpx;
			}

			.flag {
				width: max-content;
        height: 40rpx;
        line-height: 40rpx;
				padding: 0 18rpx;
				font-size: 28rpx;
				text-align: center;
				font-weight: 500;
				border-radius: 50rpx;
				background-color: $theme-color;
        margin-bottom: 32rpx;
        font-weight: 500;
			}

			.img {
				width: 372rpx;
				height: 372rpx;
				border-radius: 20rpx;
			}

			.title {
				font-weight: bolder;
				font-size: 32rpx;
        padding: 32rpx 0 16rpx;
			}

			.desc {
				font-weight: 400;
				font-size: 24rpx;
				@include text-ellipsis(3);
			}
		}
	}

	::v-deep.u-scroll-list__indicator {
		display: none;
	}
</style>
